/**
 * CSS files with the .module.css suffix will be treated as CSS modules
 * and scoped locally.
 */

.heroBanner {
  padding: 4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 996px) {
  .heroBanner {
    padding: 2rem;
  }
}

@media only screen and (max-width: 600px) {
  .columns {
    display: flex;
    align-items: center;
    word-break: break-word;
    padding: 4rem 1.5rem;
  }

  .column2 {
    flex-grow: 2;
    font-size: 0.75rem;
  }
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
}

.columns {
  display: flex;
  align-items: center;
  padding: 4rem 1.5rem;
  word-break: break-word
}

.column1 {
  text-align: center;
  flex: none;
  width: 33.3333%;
  font-weight: 600;
  font-size: calc(1rem + 1.8vw);
}

.column2 {
  flex-grow: 2;
  font-size: calc(1rem + 0.3vw);
}

.paragraph1 {
  margin: 0 0 20px
}

.features {
  margin: 0 2vw;
  width: 50%;
}

.columns2 {
  display: flex;
  align-items: center;
  padding: 4rem 1.5rem;
  word-break: break-word;
  margin: 0 calc(0rem + 5vw);
}

.featurelist {
  font-size: calc(0rem + 2vw);
  flex-grow: 1;
  margin-left: calc(0rem + 3vw);
  list-style-position: inside;
}
